<template>
  <el-scrollbar class = "navigator" width = "" height = "80vh">
    <el-menu
        default-active = "1"
        :default-openeds = "['6', '7']"
        class = "el-menu-vertical-demo"
    >
      <!--发现音乐-->
      <el-menu-item @click = "goSomewhere('DiscoveredMusic')" index = "1">

        <template #title>
          <span>发现音乐</span>
        </template>
      </el-menu-item>
      <!--视频-->
      <el-menu-item @click = "goSomewhere('VideoMv')" index = "3">
        <span>视频</span>
      </el-menu-item>
      <!--关注-->
      <el-menu-item @click = "goSomewhere('FriendsPost')" index = "4">
        <router-link to = "/FriendsPost">关注</router-link>
      </el-menu-item>
      <!--我的音乐-->
      <el-menu-item-group index = "5">
        <template #title>
          <span>我的音乐</span>
        </template>
        <el-menu-item @click = "goSomewhere('PlayList')" index = "5-1">
          <i-like theme = "two-tone" size = "17" :fill = "['#313131' ,'#fff']" />
          <span>我喜欢的音乐</span>
        </el-menu-item>
        <el-menu-item index = "5-2">
          <i-download-four theme = "two-tone" size = "17" :fill = "['#313131' ,'#fff']" />
          <span>本地与下载</span>
        </el-menu-item>
        <el-menu-item @click = "goSomewhere('MyCollections')" index = "5-3">
          <i-collection-records theme = "two-tone" size = "17" :fill = "['#313131' ,'#fff']" />
          <span>我的收藏</span>
        </el-menu-item>
      </el-menu-item-group>
      <!--创建的歌单-->
      <el-sub-menu class = "song-list" index = "6">
        <template #title>
          <span>我创建的歌单</span>
          <i-add @click.stop = "dialogVisible = true" class = "create-list" theme = "outline" size = "17"
                 fill = "#808080"
                 :strokeWidth = "3"
                 strokeLinejoin = "miter" />
        </template>
        <!--  for循环-->
        <el-menu-item @click = "goSomewhere('PlayList')" index = "6-1">
          <router-link to = "/">
            <i-music-menu theme = "two-tone" size = "17" :fill = "['#313131' ,'#fff']" />
            <span>我创建的歌单</span>
          </router-link>
        </el-menu-item>
      </el-sub-menu>
      <!--收藏的歌单-->
      <el-sub-menu class = "song-list" index = "7">
        <template #title>
          <span>我收藏的歌单</span>
        </template>
        <!--  for循环-->
        <el-menu-item @click = "goSomewhere('PlayList')" index = "7-1">
          <i-music-menu theme = "two-tone" size = "17" :fill = "['#313131' ,'#fff']" />
          <span>我收藏的歌单</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
    <!--创建歌单对话框-->
    <el-dialog
        v-model = "dialogVisible"
        title = "新建歌单"
        :modal = "false"
        :close-on-click-modal = "false"
        :draggable = "true"
        width = "30%"
    >
      <el-input v-model = "input" placeholder = "请输入新歌单标题" />
      <el-checkbox v-model = "checked1" label = "是否为隐私歌单" size = "large" />
      <template #footer>
      <span class = "dialog-footer">
        <el-button class = "submit-list" @click = "dialogVisible = false"
        >提交</el-button
        >
      </span>
      </template>
    </el-dialog>

  </el-scrollbar>
</template>

<script setup>

import router from "@/router";
import {ref} from "vue";

//路由跳转
function goSomewhere(routeName) {
  switch (routeName) {
    case 'DiscoveredMusic' :
      router.push('/DiscoveredMusic')
      break
    case 'VideoMv' :
      router.push('/VideoMv')
      break
    case 'FriendsPost' :
      router.push('/FriendsPost')
      break
    case 'PlayList' :
      router.push({path: '/PlayList'})
      break
    case 'MyCollections' :
      router.push('/MyCollections')
      break

  }
}

//创建歌单
let dialogVisible = ref(false)
let input = ref('1')
let checked1 = ref(true)

</script>

<style lang = "less" scoped>
.navigator {

  .el-menu-vertical-demo {
    width: 100%;
    border-right: 0;
    //一级菜单样式
    :deep(.el-menu-item) {
      line-height: 40px;
      height: 40px;
    }

    > :deep(.el-menu-item.is-active) {
      color: black;
      font-size: 15px;
      font-weight: bolder;
      background-color: #bebcbc32;
    }

    // 我喜欢的音乐
    .el-menu-item-group {
      :deep(.el-menu-item) {
        line-height: 45px;
        height: 45px;

        > * {
          padding-right: 5px;
        }
      }

      :deep(.el-menu-item.is-active) {
        color: black;
        background-color: #bebcbc32;
      }
    }

    //收藏和创建的歌单
    .el-sub-menu {

      .el-menu-item {
        > * {
          padding-right: 5px;
        }
      }

      :deep(.el-menu-item.is-active) {
        color: black;
        background-color: #bebcbc32;
      }

      :deep(.el-sub-menu__title) {
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        color: #909399;
      }
    }

  }


  .create-list {
    margin: 5px;

    &:hover {
      opacity: .8;
    }
  }

  .submit-list {
    border-radius: 10px;
    color: #fff;
    background-color: var(--slider-button-color);

    &:hover {
      color: #fff;
      background-color: #d86767;
    }
  }

  //滚动条样式
  :deep(.el-scrollbar__wrap) {
    border-right: 1px solid var(--el-menu-border-color);
  }

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }


  //单选框样式
  :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
    color: black;
  }

  :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: var(--slider-button-color);
    border-color: var(--slider-button-color);
  }

  :deep(.el-checkbox__inner:hover) {
    border-color: var(--slider-button-color);
  }

  // router-link
  a {
    display: flex;
    align-items: center;
  }

}


</style>